<template>
  <view>
    <u-scroll-list
      :indicator="false"
      indicatorColor="#fff0f0"
      indicatorActiveColor="#f56c6c"
      touch-action="none"
    >
      <view v-for="(value,index) in goods" :key="value.id" class="prize">
        <view class="prizepart">
          <view class="prizepart_img">
            <image :src="value.product ? value.product.mainImg : ''" alt="" />
          </view>
          <view class="prizename">{{
            value.product ? value.product.name : "未知"
          }}</view>
        </view>
        <view class="icon" v-if="value.product.ext">
          <image src="/static/icon.png" alt=""/>
        </view>
      </view>
    </u-scroll-list>
  </view>
</template>

<script>
export default {
  props: {
    goods: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.prize {
  position: relative;
}
.prizepart {
  width: 218rpx;
  height: 306rpx;
  margin-left: 20rpx;
  background-color: #fff;
  overflow: hidden;
  .prizepart_img {
    width: 202rpx;
    height: 202rpx;
    margin: 8rpx auto 0 auto;
    // border: 1rpx solid skyblue;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .prizename {
    width: 202rpx;
    font-size: 24rpx;
    text-align: center;
    margin: 15rpx auto 0 auto;
    color: #000;
  }
}
.icon {
  position: absolute;
  top: 0;

  right: 0;
  width: 72rpx;
  height: 40rpx;
  // background-color: pink;
  image {
    width: 100%;
    height: 100%;
  }
}
</style>
